<template>
	<view style="height: 100%">
		<!-- pages/orders/orders.wxml -->
		<view>
			<view class="searchBar v-center around">
				<input class="search-input" @input="inputKey" :value="Fkey" placeholder="搜索我的订单" />
				<view :style="'background:' + color" @tap="searchKey" class="search_btn">确定</view>
			</view>
			<view class="tabBar stretch around">
				<view @tap="changeTab" data-index="0" class="tabItem"
					:style="'color:' + (tabType == 0 ? color : '') + ';border-bottom: 5rpx ' + (tabType == 0 ? color : '#fff') + ' solid;'">
					全部
				</view>
				<view @tap="changeTab" data-index="1" class="tabItem"
					:style="'color:' + (tabType == 1 ? color : '') + ';border-bottom: 5rpx ' + (tabType == 1 ? color : '#fff') + ' solid;'">
					待付款
				</view>
				<view @tap="changeTab" data-index="2" class="tabItem"
					:style="'color:' + (tabType == 2 ? color : '') + ';border-bottom: 5rpx ' + (tabType == 2 ? color : '#fff') + ' solid;'">
					待发货
				</view>
				<view @tap="changeTab" data-index="3" class="tabItem"
					:style="'color:' + (tabType == 3 ? color : '') + ';border-bottom: 5rpx ' + (tabType == 3 ? color : '#fff') + ' solid;'">
					待收货
				</view>
				<view @tap="changeTab" data-index="4" class="tabItem"
					:style="'color:' + (tabType == 4 ? color : '') + ';border-bottom: 5rpx ' + (tabType == 4 ? color : '#fff') + ' solid;'">
					已完成
				</view>
			</view>
		</view>
		<view v-if="orders.length > 0" class="orderList">
			<view class="orderItem" v-for="(item, idx) in orders" :key="idx">
				<view>
					<view :id="item.Head.Fcode" @tap="showDetail" class="order_title v-center between">
						<text>订单号：{{ item.Head.Fcode }}</text>
					</view>
					<view class="proList">
						<view class="proItem v-center around" v-for="(pro, i) in item.Detail" :key="i">
							<image :data-info="pro" @tap="link" class="proImg" :src="pro.Fimg"></image>

							<view :data-info="pro" @tap="link" class="proContext">
								<view class="proName">{{ pro.Fpname }}</view>
								<view class="proSku">{{ pro.Fattr }}</view>
							</view>

							<view>
								<view :data-info="pro" @tap="link" class="proNum">{{ pro.Fprice }} x {{ pro.Fnum }}
								</view>
								<view v-if="item.Head.Fstatus == 4" :data-code="item.Fcode" :data-item="pro"
									@tap="comment" class="go_comment">去评价</view>
							</view>
						</view>
					</view>
					<view :id="item.Fcode" @tap="showDetail" class="proTotal v-center between">
						<text></text>
						<text class="Ftotalmoney">￥{{ item.Head.Ftotalmoney }}</text>
					</view>
				</view>

				<view v-if="item.Head.Fstatus == 1" class="actionBar end">
					<view @tap="showDetail" :id="item.Head.Fcode" class="bg-btn" :style="'background:' + color">订单详情
					</view>
					<view @tap="cancelOrder" :data-code="item.Head.Fcode" class="bg-btn" :style="'background:' + color">
						取消订单</view>
					<view @tap="goPay" :data-item="item" :style="'background:' + color" class="bg-btn">确定支付</view>
				</view>

				<view v-else-if="item.Head.Fstatus >= 3" class="actionBar end">
					<view @tap="showDetail" :id="item.Head.Fcode" class="bg-btn" :style="'background:' + color">订单详情
					</view>
					<view @tap="showLogistics" :data-code="item.Head.Fcode" class="bg-btn"
						:style="'background:' + color">查看物流</view>
					<view v-if="item.Head.Fstatus == 4" @tap="confirmTake" :data-code="item.Head.Fcode" class="bg-btn"
						:style="'background:' + color">确定收货</view>
				</view>

				<view v-else class="actionBar end">
					<view @tap="showDetail" :id="item.Head.Fcode" class="bg-btn" :style="'background:' + color">订单详情
					</view>
				</view>
			</view>
			<!-- 加载中 -->
			<view v-if="nodata" class="more algin">已经到底了</view>
			<view @tap="doMore" v-else-if="Frun == 0" class="more algin">点击加载更多数据</view>
			<view v-else class="more algin">
				<image style="width: 32px; height: 32px" src="/static/file/images/loading.gif"></image>
				加载中
			</view>
		</view>
		<view v-else class="blank">
			<view class="algin">
				<image class="noImg" src="/static/file/images/nolist.png"></image>
			</view>
			<view class="no_msg algin">您还没有相关订单</view>
		</view>
		<comment id="comment_pop" @confirm="confirm($event, { tagId: 'comment_pop' })"></comment>
	</view>
</template>

<script>
	import comment from '@/component/comment_pop/comment_pop';
	// pages/orders/orders.js
	var util = require('../../utils/util.js');
	var api = require('../../utils/prom.js');
	const app = getApp();
	export default {
		components: {
			comment
		},
		data() {
			return {
				color: app.globalData.color,
				tabType: '0',
				orders: [],
				selectPro: {},
				selectCode: '',
				isReturn: false,
				Fexpress: null,
				Feno: null,
				page: 1,
				pagesize: 10,
				Fkey: '',
				nodata: false,
				Frun: 1,
				paysale: {},
				i: '',

				pro: {
					Fimg: '',
					Fpname: '',
					Fattr: '',
					Fprice: '',
					Fnum: ''
				}
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			console.log(options);
			this.tabType = options.type;
			console.log(this.tabType);
			this.comDialog = this.zpSelectComponent('#comment_pop');
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.onShowClone3389();
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			this.onShowClone3389({});
			uni.stopPullDownRefresh();
		},
		methods: {
			/**
			 * 生命周期函数--监听页面显示
			 */
			onShowClone3389: function() {
				var that = this;
				that.searchList();
			},

			link: function(e) {
				var item = e.currentTarget.dataset.info;
				if (item.Faid == 0) {
					var url = '/pages/proDetail/proDetail?Ftype=3&Ftypeid=' + item.Fpid;
					uni.navigateTo({
						url: url
					});
				} else {
					var url = '/pages/proDetail/proDetail?Ftype=4&Ftypeid=' + item.Faid;
					uni.navigateTo({
						url: url
					});
				}
			},

			//切换类型
			changeTab: function(e) {
				var that = this;
				var index = e.currentTarget.dataset.index;
				console.log(index);
				if (index == this.tabType) {
					return;
				}
				that.tabType = index;
				that.Frun = 0;
				that.page = 1;
				that.searchList();
			},

			doMore: function() {
				var nodata = this.nodata;
				var Frun = this.Frun;
				var page = this.page;
				if (nodata) {
					return;
				}
				if (Frun == 1) {
					return;
				}

				that.nodata = false;
				that.Frun = 1;
				that.page = page + 1;
				this.searchList();
			},

			//查询订单列表
			searchList: function() {
				var that = this;
				var pagesize = that.pagesize;
				var page = that.page;
				var Fkey = that.Fkey;
				var tabType = that.tabType;
				var url = 'SpOrder?token=' + uni.getStorageSync('token') + '&pagesize=' + pagesize + '&page=' + page +
					'&Fatype=0&Fkey=' + Fkey + '&Fstatus=' + tabType;
				api.requestAll(url, 'get', {}, function(res) {
					that.Frun = 0;
					if (res.data.length > 0 && res.data.length < pagesize) {
						that.nodata = true;
					} else {
						that.nodata = false;
					}
					if (page == 1) {
						res.data.map(function(item) {
							item.Detail.map(function(detail) {
								if (!util.isEmpty(detail.Fattr)) {
									var Fattr = '';
									var arr = JSON.parse(detail.Fattr);
									for (var i in arr) {
										var row = arr[i];
										Fattr += row.Fattr + ':' + row.Fvalue + '；';
									}
									detail.Fattr = Fattr;
								}
							});
						});
						that.orders = res.data;
					} else {
						var arr = that.orders;
						res.data.map(function(item) {
							item.Detail.map(function(detail) {
								if (!util.isEmpty(detail.Fattr)) {
									var Fattr = '';
									var arr = JSON.parse(detail.Fattr);
									for (var i in arr) {
										var row = arr[i];
										Fattr += row.Fattr + ':' + row.Fvalue + '；';
									}
									detail.Fattr = Fattr;
								}
							});
							arr.push(item);
						});
						that.orders = arr;
					}
				});
			},

			searchKey: function() {
				this.page = 0;
			},

			inputKey: function(e) {
				var that = this;
				that.Fkey = e.detail.value;
			},

			//查看详情
			showDetail: function(e) {
				var code = e.currentTarget.id;
				console.log(e.currentTarget.id);
				var that = this;
				uni.navigateTo({
					url: '/pages/orderDetail/orderDetail?code=' + code
				});
			},

			//去支付
			goPay: function(e) {
				var that = this;
				var pro = e.currentTarget.dataset.item;
				var url = 'SpGoPay?token=' + uni.getStorageSync('token') + '&code=' + pro.Head.Fcode;
				api.request(url, 'post', {}, function(res) {
					uni.navigateTo({
						url: '/pages/orderSubmit/orderSubmit?source=3&Fcode=' + pro.Head.Fcode
					});
				});
			},

			//取消订单
			cancelOrder: function(e) {
				var that = this;
				var code = e.currentTarget.dataset.code;
				uni.showModal({
					title: '提示',
					content: '确定要取消该订单吗？',
					success: function(res) {
						if (res.confirm) {
							var url = 'SpOrder?token=' + uni.getStorageSync('token') + '&code=' + code +
								'&action=del';
							api.request(url, 'post', {}, function(res) {
								that.searchList();
							});
						}
					}
				});
			},

			//评价
			comment: function(e) {
				var that = this;
				var item = e.currentTarget.dataset.item;
				var code = e.currentTarget.dataset.code;

				that.selectPro = item;
				that.selectCode = code;

				that.comDialog.show();
			},

			//发布评价
			confirm: function(e, _dataset) {
				/* ---处理dataset begin--- */
				this.handleDataset(e, _dataset);
				/* ---处理dataset end--- */
				var that = this;
				var comments = that.comDialog.data;
				var grade = comments.grade;
				var message = comments.message;
				var pro = that.selectPro;
				var param = {
					Ftid: pro.Ftid,
					Fpid: pro.Fpid,
					Fmessage: escape(message),
					Fstar: grade,
					Fspuid: '0',
					Fskuid: pro.Fskuid,
					Fcode: that.selectCode
				};
				var url = 'SpComment?token=' + uni.getStorageSync('token');
				api.request(url, 'post', param, function(res) {
					uni.showToast({
						title: '谢谢您的评论！',
						success: function() {
							that.comDialog.hide();
						}
					});
					that.searchList();
				});
			},

			//查看物流
			showLogistics: function(e) {
				var that = this;
				var code = e.currentTarget.dataset.code;
				uni.navigateTo({
					url: '/pages/logisticsList/logisticsList?code=' + code
				});
			},

			//确认收货
			confirmTake: function(e) {
				var that = this;
				//订单号
				var fcode = e.currentTarget.dataset.code;
				console.log(fcode);
				uni.showModal({
					title: '提示',
					content: '您确定要收货吗？',
					success(res) {
						if (res.confirm) {
							var url = 'SpOrderConfig?token=' + uni.getStorageSync('token') + '&code=' + fcode;
							api.request(url, 'post', {}, function(res) {
								that.searchList();
							});
						}
					}
				});
			},

			//返回首页
			backHome: function() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		}
	};
</script>
<style>
	@import './orders.css';
</style>